<div class="layui-fluid" id="app-vue" lay-title="角色列表">
    <div class="layui-card">
        <div class="custom-header">
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button type="primary"  @click="handleCreate({})"><i class="el-icon-plus"></i>新增角色</el-button>
                    </div>
                    <div class="layui-inline">

                    </div>
                </div>
            </div>
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button size="small" type="danger"  @click="handleTableCheckboxDelete('/admin/goods/sysRoleModel_dels')">批量删除</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body" >
            <el-table :data="tableData"
                      v-loading="table_loading"
                      border stripe
                      row-key="id"
                      height="calc(100vh - 320px)"
                      default-expand-all
                      :tree-props="{children: 'child_list', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column label="ID" prop="id" width="100"></el-table-column>

                <el-table-column label="角色" prop="name"  min-width="120">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row" prop="name" url='/admin/system/sysRoleModel_modInfo'/>
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="status_name" align="center" width="100">
                    <template slot-scope="scope">
                        <my-switch-status
                                url='/admin/system/sysRoleModel_modInfo'
                                :item="scope.row"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="update_time" align="center" width="150"> </el-table-column>

                <el-table-column label="操作"  fixed="right" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                        <my-btn-del
                                url='/admin/system/sysRoleModel_del'
                                :id="scope.row.id"
                                :fnc="()=>tableData.splice(scope.$index,1)"
                        />
                    </template>
                </el-table-column>

            </el-table>


        </div>
    </div>

    <!--  添加产品新增   -->
    <create-role ref="createRole" />
</div>

<script>

    layui.extend({
        createRole: 'views/system/components/createRole',
    }).use(['admin', 'conf','view', 'jquery','createRole','mixinsTableCheckbox'], function (admin, conf,view,$,createRole,mixinsTableCheckbox) {

        (function(){

        })()


        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                total:0,
                tableData: [],
                select_list: [],
                listQuery:{
                    page:1,
                    keyword:''
                },
            },
            components:{
              "create-role":createRole,
            },
            mixins:[mixinsTableCheckbox],
            created: function() {
                this._initData()
            },
            methods: {

                _initData:function(is_reset){
                    if(is_reset===true){

                    }
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/system/sysRoleModel_lists'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },


                handleCreate:function(item) {
                    console.log(window)
                    this.$refs['createRole'].showDialog(item,this)

                },


            }
        })
    })

</script>